<body class="layui-bg-gray pearone-container">
    <div class="layui-card" style="min-height: 80vh;">
        <div class="layui-card-body" style="padding: 40px;">
            <div class="layui-btn-container tag" lay-filter="rticleatypeTag" lay-allowclose="true" lay-newTag="true"
                id="rticleaTypetagList">
            </div>
        </div>
    </div>
</body>
<style>
    .tag-item {
        background-color: #009688;
        color: white;
        border: none;
    }
</style>

<script>
    layui.use(['tag', 'config'], function () {
        var $ = layui.jquery
            , tag = layui.tag;
        var config = layui.config;

        tag.render("rticleatypeTag", {
            skin: 'layui-btn layui-btn-primary layui-btn-sm layui-btn-radius',
            tagText: '<i class="layui-icon layui-icon-add-1"></i>添加分类'
        });

        $.ajax({
            url: config.base_server + 'getRticleatypeAll',
            dataType: 'json',
            type: 'get',
            async: false,
            success: function (data) {
                data = data.data;
                $.each(data, function (index, item) {
                    $('#rticleaTypetagList').prepend(`<button lay-id="${item.rticleatypeId}" type="button" class="tag-item">${item.rticleatypeTitle}</button>`);
                });
                tag.render('rticleatypeTag');
            }
        })


        tag.on('add(rticleatypeTag)', function (data) {
            var val = $(data.othis).text();
            $.ajax({
                url: config.base_server + 'addRticleatype',
                dataType: 'json',
                type: 'post',
                async: false,
                data: {
                    val: val
                },
                success: function (data) {
                    if (data.code) {
                        data = data.data;
                        layer.msg('添加成功', { icon: 1 });
                        $('#rticleaTypetagList').append(`<button lay-id="${data.insertId}" type="button" class="tag-item">${val}</button>`);
                    } else {
                        layer.msg('不能重复添加分类', { icon: 5 });
                    }
                    tag.render('rticleatypeTag');
                }
            })
            return false;
        });

        tag.on('delete(rticleatypeTag)', function (data) {
            var id = $(this).parent().attr('lay-id');
            let dom = $(this).parent().remove();
            $.ajax({
                url: config.base_server + 'delRticleatype',
                dataType: 'json',
                type: 'post',
                async: false,
                data: {
                    rticleatypeId: id
                },
                success: function (data) {
                    if (data.code) {
                        data = data.data;
                        layer.msg('删除成功', { icon: 1 });
                        dom.remove();
                    } else {
                        layer.msg('删除失败', { icon: 5 });
                    }
                    tag.render('rticleatypeTag');
                }
            })
            return false;
        });


    });
</script>